//从 Vue 全局对象中解构所需 API
// JavaScript 对象解构语法：
// const { createApp } = Vue; 等同于 const createApp = Vue.createApp
const { createApp, ref, computed, onBeforeMount } = Vue;

//创建 Vue 应用
createApp({
 
    //Vue 应用中的自定义逻辑内容都写在 setup 函数里
    setup() {

        //使用 ref 方法创建阅读清单数组，定义的 books 变量用于模板渲染
        const books = ref([
            { id: 1, title: '西线无战事' },
            { id: 2, title: '新异化的诞生：社会加速批判理论大纲' },
        ]);

        // const renderBooks = ref([
        //     { id: 1, title: '西线无战事' },
        //     { id: 2, title: '新异化的诞生：社会加速批判理论大纲' },
        // ])

        //与新增输入框绑定的变量
        const newBookTitle = ref("")

        //与页面中的单选框绑定的 隐藏所有书籍变量
        const hideAllBooks = ref(false)

        //搜索书名
        const searchBookTitle = ref("")

        //页脚选项卡内容
        const tabs = ref([
            { id: 1, title: '关于清单', content: 
                `
                <p>阅读清单是一款帮助你管理阅读计划的工具。</p>
                <p>
                    在这里，你可以记录想要阅读的书籍，追踪阅读进度，还能通过搜索快速找到清单中的书籍。无论是经典名著还是热门新书，都可以轻松添加到你的专属阅读清单中，让阅读计划更有条理。
                </p>
                ` },
            { id: 2, title: '联系我们', content: 
                `
                <p>如果你有任何建议或问题，欢迎联系我们：</p>
                <p>
                    邮箱：contact@readinglist.com<br />
                    微信：ReadingListService<br />
                    工作时间：周一至周五 9:00-18:00
                </p>
                `
            },
        ]);

        //当前激活的哪个tab
        const activeTab = ref(tabs.value[0].id);

        // 页面加载完成后会调用运行这个函数里面的内容
        onBeforeMount(() => {
            books.value = JSON.parse(localStorage.getItem('book-list')) || [];
        });

        //删除书籍
        const deleteBook = (id) => {
            books.value = books.value.filter(book => book.id !== id);
            //保存到数据库
            saveToLocalStorage(books.value)
        };

        //添加书籍
        const addBook = (bookTitle) => {
            if(!bookTitle) return
            // 向书籍数组添加新项（ref 数组需通过 .value 操作）
            books.value.push({
                id: Date.now(), // 用时间戳作为唯一ID
                title: bookTitle,
            });
            //保存到数据库
            saveToLocalStorage(books.value)
            //清空输入框
            newBookTitle.value = '';
        };

        const searchInputHandle = (e) =>{
            //console.log(e.target.value)
            console.log(searchBookTitle.value)

            //没有输入内容
            if(!searchBookTitle.value) {
                renderBooks.value = books.value
                return
            }
                     
            //过滤了符合条件的书籍
            const searchBooks = books.value.filter(function(book) {
                return book.title.toLowerCase().indexOf(searchBookTitle.value) != -1
            });

            renderBooks.value = searchBooks
        }

        const searchBooks = computed(()=>{
            if(!searchBookTitle.value) return books.value
            if(searchBookTitle.value) {
                return books.value.filter(function(book) {
                    return book.title.toLowerCase().indexOf(searchBookTitle.value) != -1
                });
            }
        })

        // 保存读书清单数据函数
        const saveToLocalStorage = (data) =>{
        	localStorage.setItem('book-list', JSON.stringify(data));
        }

        //将 books 数据返回给 vue 
        return {
            books,
            searchBooks,
            renderBooks,
            newBookTitle,
            hideAllBooks,
            tabs,
            activeTab,
            searchBookTitle,
            deleteBook,
            addBook,
            searchInputHandle
        };
    }
}).mount('#app'); //挂载到 HTML 中的 #app 元素